<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>智慧机房</title>
    <link rel="shortcut icon" href="../static/img/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="../static/css/style/style.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style/well.css">
    <link rel="stylesheet" type="text/css" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../static/css/ztree/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="../static/css/common/jquery.pagination.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/common/video-js.min.css" />
</head>

<body>
    <div class="app">
        <header>
            <div class="header-border">
            </div>
            <div class="header-content">
                <div id="header-date"></div>
                <div id="header-week"></div>
                <div id="header-menu" class="header-nav">
                    <div>首页</div>
                </div>
                <div id="header-room" class="header-nav selected">
                    <div class="selectedRoom"></div>
                </div>
                <div id="orgname">
                    <img src="../static/img/images/icon2.png" alt="">
                    <span></span></div>
                <div id="manage">
                    <img src="../static/img/images/icon1.png" alt="">
                    后台管理</div>
                <div id="logout">注销</div>
                <div class="room-choose">
                </div>
            </div>
        </header>
        <div class="main">
            <div class="main-left">
                <div class="main-left-overvies">
                    <div class="main-title">网点分布 &nbsp;&nbsp;<span>//////</span></div>
                    <div class="main-left-overvies-con">
                        <div> <img src="../static/img/images/icon10.png">
                            <span>机柜总数</span>
                            <span class="roomRackNum"></span></div>
                        <div> <img src="../static/img/images/icon11.png">
                            <span>pdu总数</span>
                            <span class="roomPduTotal"></span></div>
                    </div>
                </div>
                <div class="main-left-pdulist">
                    <div class="main-title"><span class="selectedRoom"></span> 各机柜PDU开/关状态
                        &nbsp;&nbsp;<span>//////</span></div>
                    <div class="main-left-pdulist-con">
                        <div class="main-left-pdulist-overview">
                            <div>
                                <div><img src="../static/img/images/icon12.png"></div>
                                <div><span class="roomPduOpen"></span><span>开启总数</span></div>
                            </div>
                            <div>
                                <div><img src="../static/img/images/icon13.png"></div>
                                <div><span class="roomPduClose"></span><span>关闭总数</span></div>
                            </div>
                        </div>
                        <div class="main-left-pdulist-list">
                        </div>
                    </div>
                </div>
                <div id="pagination" class="page fl" style="display:none;"></div>
            </div>
            <div class="main-mid">
                <div class="pdu-msg">
                    <div class="pdu-msg-close">
                        <img src="../static/img/images/close1.png">
                    </div>
                    <div class="pdu-msg-right">

                    </div>
                    <div class="pdu-msg-more">查看历史参数</div>
                </div>
                <div class="door-msg">
                    <div class="door-msg-close">
                        <img src="../static/img/images/close1.png">
                    </div>
                    <div class="door-msg-tool">
                        <div class="door-msg-tool-nav selected" data-id="1"><span>开门</span></div>
                        <div class="door-msg-tool-nav" data-id="2"><span>告警</span></div>
                        <div class="door-msg-tool-nav" data-id="3"><span>状态</span></div>
                        <div class="door-msg-tool-nav" data-id="4"><span>远程</span></div>
                    </div>
                    <div class="door-msg-body">
                        <div class="door-msg-body-list openrecord">
                            <div>
                                <div style="flex:1">姓名</div>
                                <div style="flex:2">时间</div>
                                <div style="flex:1">开门类型</div>
                            </div>
                        </div>
                        <div class="door-msg-body-list warnrecord" style="display: none;">
                            <div>
                                <div style="flex:1">名称</div>
                                <div style="flex:2">时间</div>
                                <div style="flex:1">事件</div>
                            </div>
                        </div>
                        <div class="door-msg-body-list statusrecord" style="display: none;">
                            <div>
                                <div style="flex:1">名称</div>
                                <div style="flex:2">时间</div>
                                <div style="flex:1">状态</div>
                            </div>
                        </div>
                        <div class="door-msg-body-list remoterecord" style="display: none;">
                            <div>
                                <div style="flex:1">姓名</div>
                                <div style="flex:2">时间</div>
                                <div style="flex:1">操作</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-mid-map">
                </div>
                <div class="main-mid-status">
                    <div><span>当前温度：</span><label id="curTemp"></label>℃</div>
                    <div><span>当前湿度：</span><label id="curHum"></label>%</div>
                </div>
                <div class="main-mid-chart">
                    <div class="main-mid-chart-trend">
                        <div class="main-title">近七日温湿度趋势图</div>
                        <div id="main-mid-chart-trend">
                        </div>
                    </div>
                    <div class="main-mid-chart-record">
                        <div class="main-title">温湿度历史记录
                            <span id="moreHistory" >更多
                            <img src="../static//img/images/more.png" ></span></div>
                        <div class="main-mid-chart-record-table">
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-right-monitor">
                    <div class="main-title">监控</div>
                    <div class="main-right-monitor-nav">

                    </div>
                    <div class="main-right-monitor-body">
                        <!-- <img src="../static/img/images/demo.png"> -->
                    </div>
                </div>
                <div class="main-right-alarm">
                    <div class="main-title">告警事件&nbsp;&nbsp;<span>//////</span></div>
                    <div class="main-right-alarm-table">
                    </div>
                </div>
            </div>
        </div>
        <div class="pdu-history" style="display: none;">
            <div class="pdu-history-header">
                <div class="pdu-history-title"><span class="selectedRoom"></span>&nbsp;&nbsp;pud历史信息</div>
                <div class="pdu-history-reback"><span>＜</span>
                    返回</div>
            </div>
            <div class="pdu-history-body">
                <div class="pdu-history-body-left">
                    <div class="pdu-history-body-left-search">
                        设备名称<input type="text" placeholder="" class="searchDeviceName">
                        设备编号<input type="text" placeholder="" class="searchDeviceCode">
                        <div class="history-search">查询</div>
                    </div>
                    <div class="pdu-history-body-left-table">
                        <table id="pdu-history-body-left-table">
                        </table>
                    </div>
                </div>
                <div class="pdu-history-body-right">
                    <div class="pdu-voltage-chart">
                        <div id="pdu-voltage-chart"></div>
                    </div>
                    <div class="pdu-current-chart">
                        <div id="pdu-current-chart"></div>
                    </div>
                    <div class="pdu-temperature-chart">
                        <div id="pdu-temperature-chart"></div>
                    </div>
                    <div class="pdu-select-div layui-form">
                        <select id="pdu-select" lay-filter="pduSelectFilter">

                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="status-history" style="display: none;">
            <div class="status-history-header">
                <div class="status-history-title"><span class="selectedRoom"></span>&nbsp;&nbsp;温湿度历史记录</div>
                <div class="status-history-reback"><span>＜</span>
                    返回</div>
            </div>
            <div class="status-history-body">
                <div class="status-history-body-left-table">
                    <table id="status-history-body-left-table">
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=6125416e635535d089ac5150ae8ebe04&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.Driving"></script>
    <script type="text/javascript" src="../static/js/common/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/common/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/common/video.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="../static/js/biz/well.js"></script>
    <script type="text/javascript" src="../static/js/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../static/js/common/jquery.pagination.min.js"></script>
</body>

</html>